<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function loadCity(){
            // 定义一个数组
            let arr = new Array();
            // 该数组中的每一个元素均为Option数组
            // 且由于数组的下标与下拉列的下表均为从0开始
            // 因此,该数组的每一个元素对应的实际上是当前下拉列选项之后所生成的城市列表
            arr[0] = [new Option("--城市--","-1")];
            arr[1] = [new Option("--城市--","-1"),new Option("南京","1"),new Option("苏州","2"),new Option("无锡","3"),new Option("常州","4"),new Option("泰州","5")];
            arr[2] = [new Option("--城市--","-1"),new Option("杭州","1"),new Option("金华","2"),new Option("温州","3"),new Option("宁波","4")];
            arr[3] = [new Option("--城市--","-1"),new Option("合肥","1"),new Option("滁州","2"),new Option("马鞍山","3")];

            // 获取两个下拉列
            let province = document.getElementById("province");
            let city = document.getElementById("city");
            // 获取省份下拉列中所选的选项的索引号
            let index = province.selectedIndex;

            // 清除城市下拉列中原有的选项
            city.length = 0;

            // 将对应的Option数组加载到城市下拉列中
            for(let i = 0; i < arr[index].length;i++){
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">--省份--</option>
    <option value="1">江苏</option>
    <option value="2">浙江</option>
    <option value="3">安徽</option>
</select>
<!--
    第二个下拉列中的选项内容需要根据第一个下拉列所选项目进行改变
    当第一个下拉列选择--省份--的时候
        则第二个下拉列显示选项为:--城市--
    当第一个下拉列选择江苏的时候
        则第二个下拉列显示选项为:南京、苏州、无锡、常州、泰州
    当第一个下拉列选择浙江的时候
        则第二个下拉列显示选项为:杭州、金华、温州、宁波
    当第一个下拉列选择安徽的时候
        则第二个下拉列显示选项为:合肥、滁州、马鞍山
-->
<select id="city">
    <option value="-1">--城市--</option>
</select>
</body>
</html>